<template>
    <div id="emp">
        <el-card class="box-card" shadow="always">
            <!-- card的头部 -->
            <template #header>
                <div class="card-header">
                    <span class="title">费用查询记录</span>
                    <div class="input_search">
                        <el-input v-model="search" @input="search_change" placeholder="姓名查询" />
                    </div>
                    <!-- <el-button class="button_edit" type="primary" :icon="Plus" @click="debug = !debug">调试</el-button> -->
                </div>
            </template>
            <!-- 以下是card的body区域，直接使用标签即可，不需要使用插槽 -->
            <el-table :data="tableData" style="width: 100%">
                <!-- 使用扩展行显示行记录详情
        一般情况下，扩展行在最左侧 -->
                <!-- el-descriptions 展示行信息 -->
                <el-table-column type="expand">
                    <template #default="scope">
                        <div style="padding: 20px">

                            <el-descriptions class="margin-top" :title="'患者 ' + scope.row.name + ' 的详情'" :column="3" border>
                                <!-- <template #extra>
                                    <el-button type="primary">Operation</el-button>
                                </template> -->

                                <el-descriptions-item>
                                    <template #label>
                                        <div class="cell-item">
                                            <!-- <el-icon :style="iconStyle">
                                                <user />
                                            </el-icon> -->
                                            <el-icon>
                                                <Document />
                                            </el-icon>
                                            病历号
                                        </div>
                                    </template>
                                    {{ scope.row.caseNum }}
                                </el-descriptions-item>

                                <el-descriptions-item>
                                    <template #label>
                                        <div class="cell-item">
                                            <el-icon :style="iconStyle">
                                                <Document />
                                            </el-icon>
                                            员工姓名
                                        </div>
                                    </template>
                                    {{ scope.row.name }}
                                </el-descriptions-item>

                                <el-descriptions-item>
                                    <template #label>
                                        <div class="cell-item">
                                            <el-icon :style="iconStyle">
                                                <Document />
                                            </el-icon>
                                            性别
                                        </div>
                                    </template>
                                    {{ scope.row.sex }}
                                </el-descriptions-item>

                                <el-descriptions-item>
                                    <template #label>
                                        <div class="cell-item">
                                            <el-icon :style="iconStyle">
                                                <Document />
                                            </el-icon>
                                            年龄
                                        </div>
                                    </template>
                                    {{ scope.row.age }}
                                </el-descriptions-item>
                                <el-descriptions-item>
                                    <template #label>
                                        <div class="cell-item">
                                            <el-icon :style="iconStyle">
                                                <Document />
                                            </el-icon>
                                            医生编号
                                        </div>
                                    </template>
                                    {{ scope.row.deptId }}
                                </el-descriptions-item>

                                <el-descriptions-item>
                                    <template #label>
                                        <div class="cell-item">
                                            <el-icon :style="iconStyle">
                                                <HomeFilled />
                                            </el-icon>
                                            家庭地址
                                        </div>
                                    </template>
                                    {{ scope.row.address }}
                                </el-descriptions-item>

                            </el-descriptions>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column prop="caseNum" label="病历号" sortable />

                <el-table-column prop="name" label="姓名" sortable />
                <el-table-column prop="visitDate" label="收款日期" />
                <el-table-column prop="money" label="收款金额" />
                <el-table-column prop="state_show" label="状 态">
                    <template #default="scope">
                        <el-tag :type="get_state_style(scope.row)" disable-transitions>{{ scope.row.state_show }}</el-tag>
                    </template>
                </el-table-column>


                <el-table-column label="Operations">

                    <template #default="scope">
                        <!-- <el-button class="button_edit" v-if="debug" @click="unEdit(scope.$index, scope.row)">-</el-button>
                        <el-button class="button_edit" v-if="debug"
                            @click="handleEdit(scope.$index, scope.row)">+</el-button>
                        <el-button class="button_edit" @click="handleEdit(scope.$index, scope.row)"
                            :disabled="scope.row.delmark == 0 || scope.row.delmark == 3">
                            <i class="fa fa-play-circle-o fa-1x" aria-hidden="false"></i>
                            <span v-if="scope.row.delmark == 0">完成 </span>
                            <span v-if="scope.row.delmark == 1">接诊</span>
                            <span v-if="scope.row.delmark == 2">缴费</span>
                            <span v-if="scope.row.delmark == 3">完成</span>
                        </el-button> -->

                        <el-button class="button_drop" v-if="scope.row.delmark == 3"
                            @click="donotpay(scope.$index, scope.row)">退费</el-button>
                        <!-- <el-button class="button_renew" v-if="scope.row.delmark ==5"
                            @click="renew(scope.$index, scope.row)"
                            >恢复记录</el-button> -->
                        <!-- <el-button size="small" type="danger">Delete</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 添加增加和修改对话框即可  -->
    </div>
</template>

<script setup>
const debug = ref(false);
import { ref, computed } from 'vue'
import $axios from '../../utils/axios'
import { ElMessage, ElMessageBox } from 'element-plus'

const psw_same = ref(false)

const formLabelWidth = '140px'
import {
    Plus,
    User,
    HomeFilled,
    Document,
} from '@element-plus/icons-vue'
const FilterTableData = computed(() =>
    tableData.value.filter(
        (data) =>
            !show_del.value ||
            data.name.toLowerCase().includes(show_del.value.toLowerCase())
    )
)
const tableData = ref([
    {
        id: 1,
        caseNum: "233",
        name: "赵子鉴",
        sex: "男",
        idnum: "130604200212160916",
        birthday: new Date(2002, 11, 16),
        age: 21,
        address: "河北省保定市莲池区迎宾小区22号楼2单元301",
        medicalhistory: "无",

        visitDate: new Date(2002, 11, 16),
        weekday: "1",
        noon: "上午",

        deptId: 2,
        leve_id: 2,
        docId: -1,

        isBook: 1,//默认选择病历本
        money: 1,

        medicalcard: "10010",
        medicalmoney: "1",
        delmark: '',
        state_show: "",
        button_show: "诊治",
    }
]

)

const show_del = ref(0)

// const test=(row) => {
//     console.log(row);
//     row.delmark=row.delmark==1?0:1;
// }

const modDelmark = (index, row) => {
    console.log("row: " + row.delmark);
    // if (row.delmark == 1) {

    // }
}


let curentindex = -1

const switch_change = (value) => {
    console.log(value)
    const path = "/patient/delet"
    $axios.post(path, value, {

        headers: {
            'Content-Type': 'application/json;utf-8'
        }

    }).then((res) => {
        if (res.data.code === 200) {
            console.log(res.result);
        }
    })
}
const switch_del = async () => {
    console.log(show_del.value);
    search.value = ''
    //1是仅显示生效，0为全部显示
    if (show_del.value === 0) {
        console.log("search", search.value);

        loaddata()
    }
    else if (show_del.value === 1) {
        const path = '/patient/justpay'
        // 发同步请求
        // 发完ajax请求以后，进入等待状态，直到服务器做出响应或者超时
        // 并且返回服务器做出响应
        console.log("加载生效数据");
        const { data: res } = await $axios.get(path)
        // 应用结果
        if (res.code === 200) {
            tableData.value = res.result
            console.log("加载数据成功：");
            console.log("res_del:", res.result);

        }
        tableData.value = tableData.value.filter(checkItem)
        console.log("filter_del", tableData.value);
    }

}
const get_state_style = (row) => {
    let s = ""
    switch (row.delmark) {
        case 0:
            s = 'info'  //"退号";

            break;

        case 1:
            s = '' // "已挂号";

            break;

        case 2:
            s = 'success' //"已接诊";

            break;

        case 3:
            s = 'success'// "已缴费";

            break;
        case 4:
            s = 'info'// "已退费";

            break;
        case 5:
            s = 'info'// "已删除";
            break;
        default:
            s = 'danger'  //"未知";
            row.state_show = '未知'
            break;
    }
    test_state();
    return s;
}


function checkItem(num) { return num.delmark === 0; }
function searchItem(num) { console.log("test:\n" + num.name + " " + num.name.indexOf(search.value)); return !(num.name.indexOf(search.value) === -1); }
const search = ref()
const search_change = async () => {
    const path = '/patient/justpay'
    // 发同步请求
    // 发完ajax请求以后，进入等待状态，直到服务器做出响应或者超时
    // 并且返回服务器做出响应
    console.log("为表格自动加载数据");
    const { data: res } = await $axios.get(path)
    // 应用结果
    if (res.code === 200) {
        tableData.value = res.result
        console.log("加载数据成功：");
        console.log("res_search:", res.result);

    }
    var s = tableData.value.filter(searchItem);
    tableData.value = s
    console.log("filter_search:", tableData.value.filter(searchItem));

}
// const autoSet = () => {

// }
// autoSet()
// 为表格加载数据

const loaddata = async () => {
    // 定义请求路径

    const path = '/patient/justpay'
    // 发同步请求
    // 发完ajax请求以后，进入等待状态，直到服务器做出响应或者超时
    // 并且返回服务器做出响应
    console.log("为表格自动加载数据");
    const { data: res } = await $axios.get(path)
    // 应用结果
    if (res.code === 200) {
        tableData.value = res.result
        console.log("加载数据成功：");
        console.log(res.result);
        test_state()
    }
}
// 调用
loaddata()
const test_state = () => {
    for (let i = 0; i < tableData.value.length; i++) {
        // console.log("i: " + i);
        switch (tableData.value[i].delmark) {

            case 0:
                tableData.value[i].state_show = "已退号";
                break;

            case 1:
                tableData.value[i].state_show = "已挂号";
                break;

            case 2:
                tableData.value[i].state_show = "已接诊";
                break;

            case 3:
                tableData.value[i].state_show = "已缴费";
                break;
            case 4:
                tableData.value[i].state_show = "已退费";
                break;
            case 5:
                tableData.value[i].state_show = "已删除";
                break;
            default:
                tableData.value[i].state_show = "未知";
                break;
        }
    }
}
const unEdit = (index, row) => {
    row.delmark = row.delmark - 1;
    test_state()
    console.log("id=" + row.id);
    const path = "/patient/updatedelmarkbyid/" + row.id + "/" + row.delmark;
    // weekString2Num4Mod();

    $axios.post(path, {

        headers: {
            'Content-Type': 'application/json;utf-8'
        }

    })
}
const handleEdit = (index, row) => {


    row.delmark = row.delmark + 1;
    test_state()
    console.log("id=" + row.id);
    const path = "/patient/updatedelmarkbyid/" + row.id + "/" + row.delmark;
    // weekString2Num4Mod();

    $axios.post(path, {

        headers: {
            'Content-Type': 'application/json;utf-8'
        }

    })

}
const donotpay = (index, row) => {
    ElMessageBox.confirm(
        '是否要退费？',
        'Warning',
        {
            confirmButtonText: '确认退费',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        row.delmark = 4;
        test_state()
        console.log("id=" + row.id);
        const path = "/patient/updatedelmarkbyid/" + row.id + "/" + row.delmark;
        // weekString2Num4Mod();
        $axios.post(path, {
            headers: {
                'Content-Type': 'application/json;utf-8'
            }
        })
        ElMessage({
            type: 'success',
            message: '退费成功',
        })
    })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消退费',
            })
        })

}
const renew = (index, row) => {
    ElMessageBox.confirm(
        '是否恢复记录？',
        'Warning',
        {
            confirmButtonText: '恢复',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        row.delmark = 3;
        test_state()
        console.log("id=" + row.id);
        const path = "/patient/updatedelmarkbyid/" + row.id + "/" + row.delmark;
        // weekString2Num4Mod();
        $axios.post(path, {
            headers: {
                'Content-Type': 'application/json;utf-8'
            }
        })
        ElMessage({
            type: 'success',
            message: '恢复成功',
        })
    })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消恢复',
            })
        })
}
</script>

<style scoped land="scss">
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
        font-size: 24px;
    }

    .input_search {

        width: 400px;
        left: 0%;
    }

    .el-card__header {
        padding: 0;
    }
}

.button_edit {
    /* background: linear-gradient(135deg, rgb(132, 176, 229), rgb(63, 103, 214), rgb(132, 154, 234)); */
    /* background-color: linear-gradient(135deg, rgb(0, 0, 255), rgb(0, 128, 255), rgb(0, 255, 255)); */
    /* background: linear-gradient(135deg, rgb(0, 178, 74), rgb(100, 216, 149), rgb(69, 105, 143)); */
    color: white;
    background: linear-gradient(135deg, rgb(100, 100, 255), rgb(0, 128, 255), rgb(0, 200, 250));
    transition: background-color 1.5s ease;
}

.button_edit:hover {
    background: linear-gradient(135deg, rgb(0, 178, 74), rgb(100, 216, 149), rgb(69, 175, 203));
    color: yellow;
}

.button_edit:focus {
    background: linear-gradient(135deg, rgb(0, 178, 74), rgb(100, 216, 149), rgb(69, 175, 203));
    color: white;
}

.button_drop {
    /* background: linear-gradient(135deg, rgb(132, 176, 229), rgb(63, 103, 214), rgb(132, 154, 234)); */
    /* background-color: linear-gradient(135deg, rgb(0, 0, 255), rgb(0, 128, 255), rgb(0, 255, 255)); */
    /* background: linear-gradient(135deg, rgb(0, 178, 74), rgb(100, 216, 149), rgb(69, 105, 143)); */
    color: white;
    background: linear-gradient(135deg, rgb(224, 224, 227), rgb(0, 128, 255), rgb(0, 200, 250));
    transition: background-color 1.5s ease;
}

.button_drop:hover {
    background: linear-gradient(135deg, rgb(255, 229, 100), rgb(255, 0, 0), rgb(250, 150, 0));
    color: yellow;
}

.button_drop:focus {
    background: linear-gradient(135deg, rgb(0, 178, 74), rgb(100, 216, 149), rgb(69, 175, 203));
    color: white;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 100%;
    margin-top: 12px;
    border-radius: 12px;
}

.cell-item {
    display: flex;
    align-items: center;
}
</style>